<template>
  <div class="ul_timeline" v-loading="loading" element-loading-text="加载中...">
    <el-empty description="暂无数据" v-if="total == 0" />
    <el-timeline v-else class="first_pane">
      <el-timeline-item
        class="box-card"
        v-for="(activity, index) in activeList"
        :color="color[index % 4]"
        :key="index"
        :timestamp="activity.createTime"
        placement="top"
      >
        <el-card>
          <template #header>
            <div class="card-header">
              <h4>{{ activity.empType }}</h4>
            </div>
          </template>
          <div class="c_network" :class="colorBg[index % 4]">
            {{ '【' + activity.empType + '】 ' + activity.emp }}</div
          >
          <div class="c_note">{{ activity.content }}</div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination
      class="page_bo"
      hide-on-single-page
      @current-change="getList"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, toRefs } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getReminderList } from '../../../../../api/order'
  const props = defineProps({
    workId: [String, Array],
  })
  const color = ['#007cff', '#a06eff', '#00c0c0', '#e69103']
  const colorBg = ['back_c4', 'back_c3', 'back_c2', 'back_c1']
  const { workId } = toRefs(props)
  const activeList = ref(null) // 催单数据
  const total = ref(0)
  let pageSize = ref(10)
  let currentPage = ref(1)
  let loading = ref(false)
  onMounted(() => {
    getList(1)
  })
  async function getList(page: number) {
    currentPage.value = page
    let data = {
      limit: pageSize.value,
      page: page,
    }
    loading.value = true
    await getReminderList(data, workId.value).then((res) => {
      if (res.data.success) {
        activeList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
      loading.value = false
    })
  }
</script>
<style lang="scss" scoped>
  .page_bo {
    display: flex;
    justify-content: center;
  }
  @import '../index.scss';
</style>
